const leave1 = [
    [1,2,3,4,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,1,1,1,0,0,1,1,1,0,0,0,0,0,0],
    [0,0,0,0,0,1,0,0,0,1,1,0,0,0,1,0,0,0,0,0],
    [0,0,1,0,1,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0],
    [0,0,1,0,1,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0],
    [0,0,1,0,1,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0],
    [0,0,1,0,1,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,4,0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,4,0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,5,0,5,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,5,0,5,0,0,0,2,2,2,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,3,3,3,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
];

let img = new Image();
img.src = "./images/tankAll.gif";
let explosionImg = new Image();
explosionImg.src = "./images/explosion.png";
let explosionSound = new Audio("./audio/playerCrack.mp3");
let shootSound = new Audio("./audio/attack.mp3");
let bgm = new Audio("./audio/start.mp3");
let img2 = new Image();
img2.src = "./images/menu.gif";
img2.onload = function () {
    let canvas = document.getElementById("cvs");
    let context = canvas.getContext("2d");
    
    context.drawImage(img2, 0, 0, 600, 600);
    
}
onkeydown = function (event) {
    if(event.keyCode === 13){
        bgm.play();
        drawAll();
        
    }
}

function drawAll () {
    let canvas = document.getElementById("cvs");
    let context = canvas.getContext("2d");

    // 假设每个图块的大小为 30x30 像素
    const tileSize = 30;

    canvas.width = leave1[0].length * tileSize;
    canvas.height = leave1.length * tileSize;
    context.fillStyle = 'black';
    context.fillRect(0, 0, canvas.width, canvas.height);

    leave1.forEach((row, rowIndex) => {
        row.forEach((cell, colIndex) => {
            let x = colIndex * tileSize;
            let y = rowIndex * tileSize;

            switch (cell) {
                case 0:
                    // 空
                    break;
                case 1:
                    // 墙
                    context.drawImage(img, 0, 96, 15, 15, x, y, tileSize, tileSize);
                    break;
                case 2:
                    // 铁
                    context.drawImage(img, 17, 96, 15, 14, x, y, tileSize, tileSize);
                    break;
                case 3:
                    // 水
                    context.drawImage(img, 33, 96, 15, 14, x, y, tileSize, tileSize);
                    break;
                case 4:
                    // 草
                    context.drawImage(img, 49, 96, 15, 14, x, y, tileSize, tileSize);
                    break;
                case 5:
                    // 滑块
                    context.drawImage(img, 65, 96, 15, 14, x, y, tileSize, tileSize);
                    break;
            }
        });
    });

    // 坦克初始位置
    let tankX = 0;
    let tankY = 0;
    let tankDirection = 'right';

    // 子弹对象
    let bullets = [];
    const bulletSpeed = 5;

    function drawTank() {
        let tankImageX = 0;
        let tankImageY = 0;

        switch (tankDirection) {
            case 'right':
                tankImageX = 93;
                tankImageY = 0;
                break;
            case 'down':
                tankImageX = 30;
                tankImageY = 0;
                break;
            case 'left':
                tankImageX = 63;
                tankImageY = 0;
                break;
            case 'up':
                tankImageX = 0;
                tankImageY = 0;
                break;
        }

        context.drawImage(img, tankImageX, tankImageY, 30, 30, tankX, tankY, tileSize, tileSize);
    }

    function update() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillStyle = 'black';
    context.fillRect(0, 0, canvas.width, canvas.height);
        drawMap();
        drawTank();
        updateBullets();
    }

    function drawMap() {
        leave1.forEach((row, rowIndex) => {
            row.forEach((cell, colIndex) => {
                let x = colIndex * tileSize;
                let y = rowIndex * tileSize;

                switch (cell) {
                    case 0:
                        // 空
                        break;
                    case 1:
                        // 墙
                        context.drawImage(img, 0, 96, 15, 15, x, y, tileSize, tileSize);
                        break;
                    case 2:
                        // 铁
                        context.drawImage(img, 17, 96, 15, 14, x, y, tileSize, tileSize);
                        break;
                    case 3:
                        // 水
                        context.drawImage(img, 33, 96, 15, 14, x, y, tileSize, tileSize);
                        break;
                    case 4:
                        // 草
                        context.drawImage(img, 49, 96, 15, 14, x, y, tileSize, tileSize);
                        break;
                    case 5:
                        // 滑块
                        context.drawImage(img, 65, 96, 15, 14, x, y, tileSize, tileSize);
                        break;
                }
            });
        });
    }

    function canMove(x, y) {
        let colIndex = Math.floor(x / tileSize);
        let rowIndex = Math.floor(y / tileSize);
        let cell = leave1[rowIndex][colIndex];
        return cell === 0 || cell === 3 || cell === 4;
    }

    function updateBullets() {
        bullets.forEach((bullet, index) => {
            switch (bullet.direction) {
                case 'right':
                    bullet.x += bulletSpeed;
                    break;
                case 'down':
                    bullet.y += bulletSpeed;
                    break;
                case 'left':
                    bullet.x -= bulletSpeed;
                    break;
                case 'up':
                    bullet.y -= bulletSpeed;
                    break;
            }

            if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height || checkBulletCollision(bullet)) {
                bullets.splice(index, 1);
                 explosionSound.play();
            // 显示爆炸效果图片
            context.drawImage(img, bullet.x - tileSize / 2, bullet.y - tileSize / 2, tileSize, tileSize);
            } else {
                drawBullet(bullet);
            }
        });
    }

    function drawBullet(bullet) {
        let bulletImageX = 0;
        let bulletImageY = 0;

        switch (bullet.direction) {
            case 'right':
                bulletImageX = 99;
                bulletImageY = 97;
                context.drawImage(img, bulletImageX, bulletImageY, 5, 4, bullet.x, bullet.y, 10,8);
                break;
            case 'down':
                bulletImageX = 87;
                bulletImageY = 96;
                context.drawImage(img, bulletImageX, bulletImageY, 4, 8, bullet.x, bullet.y, 8,16);
                break;
            case 'left':
                bulletImageX = 92;
                bulletImageY = 97;
                context.drawImage(img, bulletImageX, bulletImageY, 5, 4, bullet.x, bullet.y, 10,8);
                break;
            case 'up':
                bulletImageX = 81;
                bulletImageY = 96;
                context.drawImage(img, bulletImageX, bulletImageY, 4, 6, bullet.x, bullet.y, 8,10);
                break;
        }
        
    }

    function checkBulletCollision(bullet) {
        let colIndex = Math.floor(bullet.x / tileSize);
        let rowIndex = Math.floor(bullet.y / tileSize);
        let cell = leave1[rowIndex][colIndex];
        if (cell === 1) {
            // 播放音效
            explosionSound.play();
            // 显示爆炸效果图片
            context.drawImage(img, bullet.x - tileSize / 2, bullet.y - tileSize / 2, tileSize, tileSize);
            setTimeout(() => {
                
                leave1[rowIndex][colIndex] = 0;
            }, 100);
            
            return true;
        }else if (cell === 2) {
            // 播放音效
            explosionSound.play();
            // 显示爆炸效果图片
            context.drawImage(img, bullet.x - tileSize / 2, bullet.y - tileSize / 2, tileSize, tileSize);
            
            
            return true;
        }
        
        return false;
    }

    document.addEventListener('keydown', (event) => {
        let newX = tankX;
        let newY = tankY;

        switch (event.key) {
            case 'ArrowRight':
                tankDirection = 'right';
                newX += tileSize;
                break;
            case 'ArrowDown':
                tankDirection = 'down';
                newY += tileSize;
                break;
            case 'ArrowLeft':
                tankDirection = 'left';
                newX -= tileSize;
                break;
            case 'ArrowUp':
                tankDirection = 'up';
                newY -= tileSize;
                break;
            case ' ':
                // 发射子弹
                shootSound.play();
                bullets.push({
                    x: tankX + tileSize / 2,
                    y: tankY + tileSize / 2,
                    direction: tankDirection
                });
                break;
        }

        if (canMove(newX, newY)) {
            tankX = newX;
            tankY = newY;
        }

        update();
    });

    setInterval(update, 1000 / 60);
}